<template>
  <div class="sample-index">
      <search-box type="sample" />
      <a-table
      :scroll="{ y: 380 }"
      style="margin: 30px 0; height: 400px;"
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 6 }"
    >
      <span slot="pic">
        <img style="width: 50px; heigth: 50px" src="@/assets/ops1.png" />
      </span>
    </a-table>
    <div style="height:50px;overflow:hidden">

    </div>
    <a-modal
      title="详情"
      :dialog-style="{ top: '20px' }"
      
      :visible="modal2Visible"
      cancelText="取消"
      okText="确定"
      :width="1200"
      centered
      @ok="() => setModal2Visible(false)"
      @cancel="() => setModal2Visible(false)"
    >
     <sampleChangeModal />
    </a-modal>
     <a-modal
      title="详情"
      :dialog-style="{ top: '20px' }"
      
      :visible="modal1Visible"
      cancelText="取消"
      okText="确定"
      :width="1200"
      centered
      @ok="() => setModal1Visible(false)"
      @cancel="() => setModal1Visible(false)"
    >
     <sampleModal/>
    </a-modal>
  </div>
</template>

<script>
const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    photo: `Edward King ${i}`,
    author: 32,
    sample: `London, Park Lane no. ${i}`,
    date: "2021-7-31",
  });
}
import searchBox from "@/components/search-box";
import sampleModal from './sample-modal.vue'
import sampleChangeModal from './sample-change-modal.vue'
export default {
  components:{
    searchBox,sampleModal,sampleChangeModal
  },
  data () {
    return {
      modal1Visible:false,
      modal2Visible:false,
      data,
      columns: [
        {
          title: "作品集",
          dataIndex: "photo",
          scopedSlots: { customRender: "pic" },
          width:200
        },
        {
          title: "艺术家",
          dataIndex: "author",
          width:100
        },
        {
          title: "所属作品",
          dataIndex: "sample",
        },
        {
          title: "时间",
          dataIndex: "date",
        },
        {
          title:"操作",
          dataIndex:"operation",
          customRender: (value, record, index) => {
            const obj = {
              children: (
                // @click="() => save(record.key)"
                <div class="operation">
                  <span style="color:#4EA3FB" onClick = {() => this.showModal2()}> 详情 </span>
                  <span style="color:red"  onclick={() => { this.download(record) }}> 删除 </span>
                </div>
                
                ),
              attrs: {}
            }
            
            return obj
          }
        }
      ],
    }
  },
  methods:{
        setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible;
    },
    setModal2Visible(modal2Visible) {
      this.modal2Visible = modal2Visible;
    },
    showModal(){
      this.modal1Visible = true
    },
    showModal2(){
      this.modal2Visible = true
    }
  }
}
</script>

<style>
.sample-index{
   width: 100%;
  height: 100%;
  padding: 50px;
  text-align: left;
  overflow: hidden;
}
.operation{
  width: 100px;
  display: flex;
  justify-content: space-between;
}

</style>